<template>
    <BasicModal
        v-bind="$attrs"
        title="审核视频"
        width="1000px"
        okText="确定"
        @register="register"
        @cancel="cancelFn"
        @ok="okFn"
    >
        <Spin :spinning="spinning" tip="更新中...">
            <Description
                size="middle"
                title="视频信息"
                :column="2"
                :data="selectItem"
                :schema="landlordSchema"
            />

            <div class="image-item">
                <Description size="small" :bordered="false" title="封面" />
                <Image :width="200" :src="selectItem?.cover"></Image>
            </div>

            <div>
                <Description size="small" :bordered="false" title="内容" />
                <video
                    preload
                    :style="'width: 100%;height:380px'"
                    controls="controls"
                    :src="selectItem?.file"
                ></video>
            </div>
            <!-- 请求表单 -->
            <BasicForm
                layout="horizontal"
                ref="formElRef"
                :schemas="formSchemas"
                :showResetButton="false"
                :showSubmitButton="false"
                @submit="handleSubmit"
            >
            </BasicForm>
        </Spin>
    </BasicModal>
</template>

<script lang="ts">
    import { Image, message, Spin } from 'ant-design-vue'
    import { defineComponent, computed, PropType, ref } from 'vue'
    import { DataItem, CheckParams } from '/@/api/content/video/model'
    import { BasicModal, useModalInner } from '/@/components/Modal'
    import { BasicForm, FormSchema, FormActionType } from '/@/components/Form'
    import { DescItem, Description } from '/@/components/Description'
    import { checkApi } from '/@/api/content/video'

    const landlordSchema: DescItem[] = [
        {
            field: '_id',
            label: '视频编号',
        },
        {
            field: 'title',
            label: '标题',
        },
        {
            field: 'desc',
            label: '描述',
        },
        {
            field: 'category',
            label: '分类',
        },
        {
            field: 'uid',
            label: '作者',
        },
    ]

    // 表单
    const formSchemas: FormSchema[] = [
        {
            field: 'status',
            component: 'RadioGroup',
            label: '审核结果',
            colProps: {
                span: 24,
            },
            defaultValue: 1,
            componentProps: {
                options: [
                    {
                        label: '审核通过',
                        value: 1,
                    },
                    {
                        label: '审核拒绝',
                        value: 2,
                    },
                ],
            },
        },
    ]

    // 审核弹窗
    export default defineComponent({
        props: {
            selectItem: Object as PropType<DataItem>,
        },
        components: { BasicModal, Description, Image, BasicForm, Spin },
        setup(props, context) {
            // 是否正在加载
            const spinning = ref(false)

            const formElRef = ref<Nullable<FormActionType>>(null)

            const [register, { closeModal, getVisible }] = useModalInner()
            console.log(getVisible)
            const selectItem = computed(() => {
                return props.selectItem
            })

            const cancelFn = () => {
                closeModal()
            }
            const okFn = () => {
                formElRef.value?.submit()
            }

            const handleSubmit = async (values: any) => {
                spinning.value = true
                const data: CheckParams = {
                    _id: selectItem && (selectItem.value?._id as string),
                    status: values.status,
                }
                try {
                    const res = await checkApi(data)
                    spinning.value = false
                    if (res) {
                        message.success('成功!')
                        context.emit('updateData')
                        closeModal()
                    } else {
                        message.success('失败!')
                    }
                } catch (err) {
                    spinning.value = false
                    console.log(err)
                }
            }

            return {
                selectItem,
                landlordSchema,
                formSchemas,
                register,
                cancelFn,
                okFn,
                handleSubmit,
                formElRef,
                spinning,
            }
        },
    })
</script>

<style lang="less">
    .ant-image-img {
        height: 150px;
        object-fit: cover;
    }
</style>
